<template>
    <div class="order-main all-ail">
        <section class="order-main-header">
             <mt-header title="成交明细">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <div class="container ail">
                 <div class="order-table">
                    <div class="order-header">
                        <div class="flex-between ">
                            <span v-if="refresh.fentrustType==1" class="order-sell">卖出({{symbol.fShortName}})</span>
                            <span v-if="refresh.fentrustType==0"  class="order-buy">买入({{symbol.fShortName}})</span>
                                <p class="ent-type" >{{ timestampToTime(refresh.fcreateTime)}}</p>
                        </div>
                    </div>
                    <div class="ail-order-content flex-between">
                        <div class="order-flex-center">
                            <div class="flex-all-amount">
                                <span>委托价({{symbol.group}})</span>
                                <span class="color">{{filterDecimals(refresh.fprize?refresh.fprize:'0')}}</span>
                            </div>
                            <div class="flex-all-amount">
                                <span>成交量</span>
                                <span class="color">{{(refresh.fcount-refresh.fleftCount)?refresh.fcount-refresh.fleftCount:'0'}}</span>
                            </div>
                            <div class="flex-all-amount">
                                <span>成交总额</span>
                                <span class="color">{{refresh.fsuccessAmount?refresh.fsuccessAmount:'0'}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="ail-order-content flex-between">
                        <div class="order-flex-center">
                            <div class="flex-all-amount">
                                <span>成交均价({{symbol.group}})</span>
                                <span class="color">{{filterDecimals(refresh.dealPrice)}}</span>
                            </div>
                            <div class="flex-all-amount">
                                <span>委托量({{symbol.fShortName}})</span>
                                <span class="color">{{(refresh.fcount-refresh.fleftCount)?refresh.fcount-refresh.fleftCount:'0'}}</span>
                            </div>
                            <div class="flex-all-amount">
                                <span>订单类型</span>
                                <span class="color" v-if="refresh.tradeType==0">普通</span>
                                <span class="color" v-if="refresh.tradeType==1"> 共识</span>
                                    <span class="color" v-if="refresh.tradeType==2"> 共识</span>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="flex"  v-for="(orderData, i) in refreshDetail" v-bind:key="i" >
                <div class="flex-between">
                    <span >时间</span>
                    <span style="color:rgba(134, 134, 192, 1)">{{timestampToTime(orderData[3])}}</span>
                </div>
                <div class="flex-between">
                    <span>成交价</span>
                    <span>{{orderData[4]}}</span>
                </div>
                <div class="flex-between">
                    <span>成交量</span>
                    <span>{{orderData[5]}}</span>
                </div>
                <div class="flex-between">
                    <span>手续费</span>
                    <span>{{orderData[11]}}</span>
                </div>
            </div>
             <div v-if="refreshDetail.length==0" class="data-img">
                            <img src="../../assets/coin-code.png">
                            <p>暂无明细</p>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
    name:'myOrder',
    data(){
         return {
             refreshDetail:'',
             refresh:{fentrustType:'',
             fprize:null,fleftCount:'',
             fleftCount:'',tradeType:'',fsuccessAmount:'',fShortName:'',
             group:''
             },
             symbol:''
         }
    },
    mounted() {
        let param={
            id:this.$route.query.id,
            page:1,
            pageSize:20
        }
        this.$http.post('/v2/market/newMarketRefreshDetails',param).then((res)=>{
            this.refreshDetail=res.data.data;
        })
        this.getOtcList();
       this.refreshReportUser(this.$route.query.symbol,'1,2');
    },
    methods: {
        filterDecimals(res){
              if(!res){
                  return 0
              }
            return parseFloat(res).toFixed(4);
        },
        getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if (coinGroup[ticker.group] === undefined) {
                            coinGroup[ticker.group] = []
                        }
                        coinGroup[ticker.group].push(ticker);
                        // console.log(coinGroup[ticker.group].push(ticker), "CCCCCCCCCCCCCC")
                        if (symbol && ticker.fid == symbol) {
                            current = ticker
                        }
                    }
                   this.symbol=current;
             })
        },
      refreshReportUser(symbol,status){
              let self=this;
              let param={
                  coinId:symbol,
                  stauts:0,
                  page:1,
                  pageSize:20
              }
            this.$http.post('/v2/market/marketReportRefresh',param)
                .then(function(res) {
                    self.refresh=res.data.data.filter(res=>{
                    return    res.fid==self.$route.query.id
                    })[0]  
                })
        },
            handleClose(){
                this.$router.go(-1);
            },
                  timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = (date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())+ ':'
        var s =(date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())
        return Y+M+D+h+m+s
        }
    }
}
</script>
<style lang='less' scoped>
.all-ail{
    .data-img{
        min-height: 850px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    p{
        color: #E0E0F9;
    }
}
    .flex{
        padding-top: 10px;
        border-top: 2px solid rgba(34, 34, 64, 1);
        padding-left: 30px;
        padding-right: 30px;
        .flex-between{
            height: 60px;
            line-height: 60px;
          span  :nth-child(1){
              color:   rgba(134, 134, 225, 1);
            }
        }
    }
    .ent-type{
        font-size: 20px;
        color: rgba(173, 173, 216, 1);
    }
    .ail-order-content{
        height: 105px;
        max-height: 105px;
        .flex-all-amount  :nth-child(1){
              font-size: 24px;
        }
         .flex-all-amount  :nth-child(2){
              font-size: 28px;
        }
    }
    .container{
        .flex{
            padding-left: 50px;
            padding-right: 50px;
        }
        .title{
            height: 240px;
            text-align: center;
            border-bottom: 1px solid rgba(34, 34, 64, 1);
            width: 90%;
            margin: 0 auto;
        }
        .flex-between span:nth-child(1){
            color: rgba(134, 134, 192, 1);
        }
        .flex-between span:nth-child(2){
            color: rgba(224, 224, 249, 1)
        }
        .title  p:nth-child(1){
            color: rgba(134, 134, 192, 1);
            font-size:56px;
            font-weight:500;
            height: 80px;
            line-height: 120px;
        }
        .title p:nth-child(2){
            color: rgba(224, 224, 249, 1);
            font-size:56px;
            font-weight:500;
               height: 120px;
            line-height: 120px;
        }
    }
    .mint-header{
    height: 100px;
    font-size: 32px;
    background-color:rgba(34, 34, 64, 1);
    color: #E0E0F9
}

}   
.all-ail .order-flex-center {
    width: 100%;
    display: flex;
   align-self: center;
   width: 100%;
}
.order-header{
    height: 80px;
    border-bottom: 2px solid rgba(22, 23, 54, 1);
    line-height: 80px;
    .flex-between {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.ail-order-content .flex-all-amount:nth-child(1){
    width: 30%;
}
.ail-order-content .flex-all-amount:nth-child(2){
    width: 40%;
}
.ail-order-content .flex-all-amount:nth-child(3){
    width: 30%;
}
.flex-all-amount span:nth-child(1){
    height: 60px;
    line-height: 60px;
}
.flex-all-amount{
     display: flex;
    flex-direction: column;
    height: 90px;
    text-align: center;
    max-height: 90px;
}
.all-ail .order-table{
    padding:0px;
    height: 300px;
    background:rgba(34,34,64,1);
box-shadow:0px 0px 8px 0px rgba(57,57,112,1);
    position: relative;
    margin: 30px;
}
 .flex-between{
      display: flex;
        justify-content:space-between
    }
    .order-sell{
    color: #F36D7D !important;
    font-size:32px;
}
.order-buy {
    color: #51D6AD !important;
    font-size:32px;
}
</style>